import React from "react";
import {Redirect} from "react-router-dom";
import Logo from "../../component/logo/logo";
import {WingBlank, WhiteSpace, List, InputItem, Button} from "antd-mobile";
import {connect} from "react-redux";
import {login} from "../../redux/user.reducer";
import CommonForm from "../../component/common-form/common-form";

@connect(
  state => state.user,
  {login}
)
@CommonForm
class Login extends React.Component {
  constructor () {
    super();
    this.doLogin = this.doLogin.bind(this);
    this.doRegister = this.doRegister.bind(this);
  }

  doLogin () {
    this.props.login(this.props.state);
  }

  doRegister () {
    this.props.history.push("/register");
  }


  render () {
    const {pathname} = this.props.location;
    const redirect = this.props.redirectTo && this.props.redirectTo !== pathname;
    return (
      <div className="login-wrap">
        {redirect ? <Redirect to={this.props.redirectTo}/> : null}
        <Logo/>
        <WingBlank>
          <List>
            <InputItem
              onChange={(v) => this.props.handleChange("username", v)}>
              用户名:
            </InputItem>
            <InputItem type="password"
                       onChange={(v) => this.props.handleChange("pwd", v)}>
              密  &nbsp; 码:
            </InputItem>
          </List>
          <WhiteSpace/>
          <WhiteSpace/>
          <WhiteSpace/>
          <Button type="primary" onClick={this.doLogin}>登录</Button>
          <WhiteSpace/>
          <Button type="primary" onClick={this.doRegister}>注册</Button>
        </WingBlank>
      </div>
    );
  }
}

export default Login;